<template>
    <div class="login-container">
        <div class="background-image"></div>
        <div class="login-content">
            <div class="banner">
                <el-container class="logo-wrapper">
                    <img src="@/assets/img/logo.jpg" alt="登录图标" class="logo">
                    <span class="university-name">中山大学</span>
                </el-container>
                <h1 class="banner-title">欢迎来到中大超市库存管理系统</h1>
            </div>
            <el-form :model="form" class="form-container" label-width="0" :rules="rules" :status-icon="true" ref="loginFormRef">
                <el-form-item prop="username" name="username">
                    <el-input v-model="form.username" placeholder="请输入账号" maxlength="20" clearable :prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item prop="password" name="password">
                    <el-input v-model="form.password" placeholder="请输入密码" maxlength="50" show-password clearable :prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button color="#107b3e" type="primary" @click="login" round :loading="loading">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { useUserStore } from '@/stores/user';
import { Lock, User } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const form = reactive({
    username: '',
    password: ''
});

const rules = reactive({
    username: [
        { required: true, message: '用户名不为空', trigger: 'blur' },
        { min: 1, message: '用户名长度至少为1位', trigger: 'blur' },
        { max: 20, message: '用户名长度不能超过20位', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不为空', trigger: 'blur' },
        { min: 6, message: '密码长度至少为6位', trigger: 'blur' },
        { max: 20, message: '密码长度不能超过20位', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_]+$/, message: '密码只能包含字母、数字和下划线', trigger: 'blur' }
    ]
});

const loading = ref(false);
const userStore = useUserStore();
const loginFormRef = ref();

// 登录函数
async function login() {
    try {
        loading.value = true;
        await loginFormRef.value.validate();
        const res = await axios.post('/api/login', form);
        userStore.login(form,res.data.token);
        ElMessage.success('登录成功');
    } catch (error) {
        ElMessage.error('登录失败');
        console.log('请求出错：', error);
    } finally {
        loading.value = false;
    }
}
</script>

<style scoped>
.login-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("@/assets/img/login_background.jpg");
    background-size: cover;
    background-position: center;
    z-index: -1;
}
.login-content {
    background-color: rgba(7, 31, 74, 0.9); 
    background: linear-gradient(220.55deg, #4063BC 0%, #6B0013 100%);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.banner {
    text-align: center;
    margin-bottom: 20px;
    background-color: #107b3e; 
    background: linear-gradient(220.55deg, #61C695 0%, #133114 100%);
    padding: 10px;
    border-radius: 5px;
}
.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}
.logo {
    width: 20%;
    height: auto;
    margin-right: 10px;
}
.university-name {
    font-size: 48px;
    color: white;
}
.banner-title {
    color: #efb77b; 
    font-size: 24px;
    word-break: break-word;
}
.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-container > .el-form-item {
    width: 300px;
    margin-bottom: 15px;
}
.form-container > .el-form-item:last-child button {
    width: 100%;
}
</style>